<template>
  <el-dialog
    title="设置保底"
    v-model="visible"
    :width="800"
    destroy-on-close
    @closed="$emit('closed')"
    :close-on-click-modal="false"
  >
    <el-form ref="dialogForm" :model="form" label-width="110px" :rules="rules">
      <el-form-item label="保底标题" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="奖品等级" prop="tag_id">
        <el-select
          v-model="form.tag_id"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="触发条件" prop="trigger_num">
        <el-input v-model="form.trigger_num"></el-input> 购买
        {{ form.trigger_num }}抽，触发赠送
      </el-form-item>
      <el-form-item label="赠送的商品">
        <el-button size="mini" type="primary" @click="showSelect()"
          >选择商品</el-button
        >
        <el-table :data="goodsTable" style="width: 100%">
          <el-table-column label="图片">
            <template #default="scope">
              <img :src="scope.row.image" style="width: 60px; height: 60px" />
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称"> </el-table-column>
          <el-table-column prop="price" label="价格"> </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                @click="handleDel(scope.$index)"
                type="text"
                size="small"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()"
        >保 存</el-button
      >
    </template>
  </el-dialog>

  <el-dialog
    title="商品选择"
    v-model="dialogVisible"
    destroy-on-close
    width="50%"
  >
    <Goods
      :selectedgoods="selectedGoods"
      @handleSelected="handleSelected"
      :goods-type="2"
    ></Goods>
  </el-dialog>
</template>

<script>
import Goods from "@/components/goods";
export default {
  components: {
    Goods,
  },
  data() {
    return {
      visible: false,
      isSaveing: false,
      selectedGoods: {},
      dialogVisible: false,
      goodsTable: [],
      form: {
        blindbox_id: 0,
        title: "",
        trigger_num: 1,
        tag_id: "",
        tag_name: "",
        goodsTable: [],
      },
      //验证规则
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        trigger_num: [
          { required: true, message: "请输入触发数量", trigger: "blur" },
        ],
        tag_id: [{ required: true, message: "请选择标签", trigger: "blur" }],
      },
      options: [],
    };
  },
  mounted() {
    this.getBlindboxTag();
  },
  methods: {
    // 显示
    open() {
      this.visible = true;
      return this;
    },
    // 表单注入数据
    setData(data) {
      let guarantee = data.guarantee;
      this.form.blindbox_id = data.id;
      this.form.title = guarantee.title;
      this.form.trigger_num = guarantee.trigger_num;
      this.form.tag_id = guarantee.tag_id;
      this.form.tag_name = guarantee.tag_name;
      this.goodsTable = [];
      guarantee.detail.forEach((item) => {
        this.goodsTable.push({
          id: item.goods_id,
          image: item.goods_img,
          name: item.goods_name,
          price: item.goods_price,
          recovery_price: item.recovery_price,
        });
      });
    },
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          this.form.goodsTable = this.goodsTable;
          this.options.forEach((item) => {
            if (item.id == this.form.tag_id) {
              this.form.tag_name = item.name;
            }
          });
          var res = await this.$API.blindbox.guarantee.post(this.form);
          this.isSaveing = false;
          if (res.code == 0) {
            this.$emit("success", this.form, this.mode);
            this.visible = false;
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        } else {
          return false;
        }
      });
    },
    showSelect() {
      this.dialogVisible = true;
    },
    // 单选
    handleSelected(selectedGoods) {
      this.selectedGoods = selectedGoods;
      this.goodsTable.push({
        id: selectedGoods[0].id,
        image: selectedGoods[0].image,
        name: selectedGoods[0].name,
        price: selectedGoods[0].price,
        recovery_price: selectedGoods[0].recovery_price,
      });

      this.dialogVisible = false;
    },
    // 删除
    handleDel(index) {
      this.goodsTable.splice(index, 1);
    },
    // 获取盲盒标签
    async getBlindboxTag() {
      let res = await this.$API.blindboxTag.list.get({
        limit: 9999999,
        page: 1,
        status: 1,
      });
      this.options = res.data.rows;
    },
  },
};
</script>
<style scoped>
</style>
